/* TODO Dual License MIT / GPL. Ver 960.gs */
/* TODO Logo */
/* TODO Redactar Architecture Goals y Overview (estilo CI) */
/* TODO Document Tested and Supported browsers (versions and OS) */
/* TODO Ejemplos */
/* TODO Screencast */
/* TODO Roadmap */

/* RESET */
input,select,textarea{margin:0} /* TODO Mover a Reset de Eric Meyer, YUI lo incluye excepto para <select> http://developer.yahoo.com/yui/reset/ */
input[type="submit"],input[type="reset"],.form input[type="button"],button{width:auto;overflow:visible} /* IE7 http://www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */

/* STRUCTURE */
/*
Originally inspired on RMSforms CSS Forms Framework
http://www.rmsjr.com/blog/web-design/rmsforms-a-flexible-tableless-css-forms-framework/

Base Form Structure: <form class="form-container"><fieldset><legend></legend><ul class="form"><li><label></label><input /></li></ul></fieldset></form>
Discussion: http://stackoverflow.com/questions/519234/why-use-definition-lists-dl-dd-dt-tags-for-html-forms-instead-of-tables#answer-519630

Namespaces: .form-container (form), .form (ul)

All Fallback Styles should be Overridden by the Skin
*/

/* Base Form Class */
.form{list-style:none;overflow:hidden}
.form li{overflow:hidden}
.form label,.form input,.form select,.form textarea{float:left}
.form input[type="submit"],.form input[type="reset"],.form input[type="button"]{float:none}
.form label{width:120px;margin-right:10px} /* Fallback */

/* Extended Form Classes */
.form.horizontal > li{float:left}
.form.horizontal label{width:auto} /* Fallback */
.form.right label{text-align:right}
.form.stack label{float:none;display:block}
.form.stack label{text-align:left;width:auto;margin-right:0px} /* Fallback */
.form.no-stack label{float:left}
.form.no-stack label,.form.block label{width:120px;margin-right:10px} /* Fallback */
.form.heading > li > label{font-weight:bold;text-transform:uppercase} /* Fallback */

/* Extended Labels */
.form label.block{float:left}
.form label.block{width:120px} /* Fallback */
.form label.no-block{width:auto} /* Fallback */
.form label.right{text-align:right} /* Fallback */
.form label.left{text-align:left} /* Fallback */
.form label.center{text-align:center} /* Fallback */
.form label.stack{float:none;display:block;}
.form label.stack{width:auto;margin-right:0px} /* Fallback */
.form label.no-stack{float:left}
.form label.no-stack{margin-right:10px;margin-bottom:0px} /* Fallback */

/* Form Fields */
.form input.offset,.form button.offset,.form select.offset,.form textarea.offset{margin-left:130px} /* Fallback */
.form .field{margin-bottom:0px} /* Fallback */

/* Notes: Form Field Help Notes */
.form .note.left{float:left}
.form .note.bottom{clear:both}
.form .note.bottom,.form .note.bottom.offset{margin-left:130px} /* Fallback */
.form.horizontal .note.bottom{margin-left:0px} /* Fallback */
.form.horizontal .note.bottom.offset,.form.block .note.bottom{margin-left:130px} /* Fallback */
.form.stack .note.bottom{margin-left:0px} /* Fallback */
.form.stack .note.bottom.offset{margin-left:130px} /* Fallback */
.form.no-stack .note.bottom{margin-left:130px} /* Fallback */

/* Form Nesting: One Level Depth Tested */
.form ul{padding:0} /* Fallback */
.form ul > li{padding:0} /* Fallback */
.form ul.vertical > li{padding:10px 10px 10px 0} /* Fallback */
.form ul.vertical > li:first-child{padding-top:0px} /* Fallback */
.form ul.vertical > li:last-child{padding-bottom:0px} /* Fallback */
.form.offset{margin-left:130px} /* Fallback */

/* SKIN / THEME */
/*
Skin inspired on Uni-form
http://sprawsm.com/uni-form/
*/
/* TODO v2.0
Generador/Editor de Skins basado en PHP Cacheer, DtCss o similar (aún mas sencillo http://www.sitepoint.com/blogs/2009/06/30/write-better-css-with-less/#comment-927863)
Buscar "php" en http://www.sitepoint.com/blogs/2009/06/30/write-better-css-with-less/
/*

/* Base Form */
.form-container{color:#333}
.form-container fieldset{border:1px solid #DFDFDF}
.form-container legend{color:#777;font-size:18px;padding:0 10px;margin-left:5px}
.form-container input[type="text"],.form-container input[type="password"],.form-container select,.form-container textarea{padding:2px;border:2px solid #DFDFDF}
/* TODO Opera aplica la altura a las dimensiones del checkbox .form input[type="radio"],.form input[type="checkbox"]{height:19.5px} /* Baseline: Font 13px * 1.5(line-height) = 19.5px */
.form-container input[type="submit"],.form-container input[type="reset"]{padding:2px;*padding:2px 2px 1px 2px}
.form-container input[type="submit"]{font-weight:bold}
.form-container optgroup{color:#333;background-color:#DFDFDF;font-style:normal;font-weight:bold}
.form-container option{background-color:#FFF;padding-left:10px}
.form{padding:0 10px;margin:0px}
.form > li{padding:10px;border-bottom:1px solid #DFDFDF}
.form > li:last-child,.form > li.last{border-bottom:none} /* .last Helper as a workaround for the :last-child pseudo-class in IE */
.form label{width:120px;margin-right:10px}
.form label a{color:#000;background-color:#FFFFCC;font-weight:bold;text-decoration:none;border-bottom:1px dotted}
.form label a:hover{background-color:transparent}

/* Extended Forms */
.form.horizontal > li{border-bottom:none;margin-right:10px} /* .form label 10px */
.form.horizontal label{width:auto}
.form.stack label{text-align:left;width:auto;margin-right:0px;margin-bottom:10px}
.form.no-stack label,.form.block label{width:120px;margin-right:10px}
.form.heading > li > label{color:#777;font-weight:bold;text-transform:uppercase}

/* Extended Labels */
.form label.block{width:120px}
.form label.no-block{width:auto}
.form label.right{text-align:right}
.form label.left{text-align:left}
.form label.center{text-align:center}
.form label.stack{width:auto;margin-right:0px;margin-bottom:10px}
.form label.no-stack{margin-right:10px;margin-bottom:0px}

/* Form Fields */
.form input.offset,.form button.offset,.form select.offset,.form textarea.offset{margin-left:130px}
.form .field{margin-bottom:0px}

/* Notes: Form Field Help Notes */
.form .note{color:#777;margin-bottom:0px}
.form .note a{color:#000;background-color:#FFFFCC;font-weight:bold;text-decoration:none;border-bottom:1px dotted}
.form .note a:hover{background-color:transparent}
.form .note.left{margin:2px 0 0 10px} /* .form label 10px, .form-container input,.form-container select,.form-container textarea 2px */
.form .note.bottom{padding-top:10px} /* .form label 10px */
.form .note.bottom,.form .note.bottom.offset{margin-left:130px} /* .form label 120px + 10px */
.form.horizontal .note.bottom{margin-left:0px}
.form.horizontal .note.bottom.offset,.form.block .note.bottom{margin-left:130px}
.form.stack .note.bottom{margin-left:0px}
.form.stack .note.bottom.offset{margin-left:130px}
.form.no-stack .note.bottom{margin-left:130px}

/* Fields: Form Field Status */
.form .message{padding:5px;margin-bottom:10px}
/* Required Field */
.form .required label{font-weight:bold}
.form .required label span{color:#EF1D2A;font-weight:normal}
.form .required input,.form .required select,.form .required textarea{font-weight:bold;border-color:#777}
/* Highlight Field */
.form .highlight{background-color:#FFFCDF}
.form .highlight input,.form .highlight select,.form .highlight textarea{border-color:#DFD77D}
.form .highlight .note{color:#333}
.form input[type="text"]:focus,.form input[type="password"]:focus,.form select:focus,.form textarea:focus{background-color:#FFFCDF;border-color:#DFD77D}
/* Error Field */
.form .error{background-color:#FFDFDF;border-bottom-color:#DF7D7D}
.form .error .message{color:#AF4C4C;background-color:#FFBFBF}
.form .error input,.form .error select,.form .error textarea{border-color:#DF7D7D}

/* Extended Fields */
/*
Multiple Input Fields: Checkboxes and Radio Buttons

Base Structure For Multiple Checkboxes:
<li class="multi"><input type="checkbox" /><label>label</label><br /><input type="checkbox" /><label>label</label></li>

Base Structure For Multiple Radio Buttons:
<li class="multi"><input type="radio" /><label>label</label><br /><input type="radio" /><label>label</label></li>
*/
.form .multi.offset input{margin-left:130px}
.form .multi.left label{text-align:left;margin-left:10px}
.form.stack .multi label{margin-bottom:0}
.form.stack .multi.left label{float:left}

/* Form Nesting: One Level Depth Tested */
.form ul{padding:0}
.form ul > li{padding:0}
.form ul.vertical > li{padding:10px 10px 10px 0}
.form ul.vertical > li:first-child{padding-top:0px}
.form ul.vertical > li:last-child{padding-bottom:0px}
.form.offset{margin-left:130px}

/* Action: Form Actions (input, button, a) */
.form .actions{margin-bottom:0}

.actions.right{text-align:right}
.actions.stack{margin-bottom:10px}
.actions .action:hover{text-decoration:none}
.actions .action.positive{color:#529214}
.actions .action.positive:hover{color:#FFF;background-color:#529214}
.actions .action.negative{color:#D12F19}
.actions .action.negative:hover{color:#FFF;background-color:#D12F19}
.actions input,.actions button,.actions .action{*vertical-align:middle} /* IE7 */

/* Buttons */
/*
Based on BlueTrip CSS Framework and particletree.com
http://bluetrip.org/
http://www.particletree.com/features/rediscovering-the-button-element

<button type="submit" class="button positive">
    <img src="tick.png" /> Save
</button>

<a class="button" href="#">
    <img src="key.png" /> Change Password
</a>

<a class="button negative" href="#">
    <img src="cross.png" /> Cancel
</a>
*/

/* Base Button */
button,a.button{font-size:100%}
button,a.button{padding:5px 10px;color:#565656;background-color:#F5F5F5;font-family:"Lucida Grande",Tahoma,Arial,Verdana,sans-serif;font-weight:bold;border:1px solid #DEDEDE;border-top-color:#EEE;border-left-color:#EEE;cursor:pointer}
button{*margin-right:0.45em;*padding:4px 10px 3px 10px} /* IE7 */
a.button{text-decoration:none;padding:5px 10px 6px 10px}
button:hover,a.button:hover{color:#336699;background-color:#DFF4FF;border-color:#C2E1EF}
button:active,a.button:active{color:#FFF;background-color:#6299C5;border-color:#6299C5;outline:0}

/* Extended Buttons */
/* Icon */
/* http://www.famfamfam.com/lab/icons/silk/ */
button.icon{padding:5px 10px 5px 7px;*padding:4px 10px 3px 7px}
a.button.icon{padding:5px 10px 6px 7px}
button.icon img{margin-left:-3px}
button.icon img,a.button.icon img{vertical-align:text-top}
/* Positive */
button.positive,a.button.positive{color:#529214}
button.positive:hover,a.button.positive:hover{color:#529214;background-color:#E6EFC2;border-color:#C6D880}
button.positive:active,a.button.positive:active{color:#FFF;background-color:#529214;border-color:#529214}
/* Negative */
button.negative,a.button.negative{color:#D12F19}
button.negative:hover,a.button.negative:hover{color:#D12F19;background-color:#FBE3E4;border-color:#FBC2C4}
button.negative:active,a.button.negative:active{color:#FFF;background-color:#D12F19;border-color:#D12F19}

/* Skin: wufoo */
/* Based on http://wufoo.com/ */
/* General Skin */
button,a.button{color:#464646;background:#EAEAEA url(../img/bck_button.png) repeat-x left top;font-weight:normal;border:1px solid #DEDEDE;border-right-color:#BBB;border-bottom-color:#BFBFBF;-webkit-box-shadow:rgba(0,0,0,.15) 0px 1px 3px;-moz-box-shadow:rgba(0,0,0,.15) 0px 1px 3px;-webkit-border-radius:11px;-moz-border-radius:11px}
button:hover,a.button:hover{color:#000;border-color:#999}
button:active,a.button:active{border-color:#CCC;background:#FFF url(../img/bck_button_on.png) repeat-x left top;-webkit-box-shadow:none;-moz-box-shadow:none}

button.positive,a.button.positive{color:#63A142;font-weight:bold}
button.positive:hover,a.button.positive:hover{color:#63A142;border-color:#7CB043}
button.positive:active,a.button.positive:active{color:#FFF;background:#94B717;border-color:#94B717;text-shadow:#607710 1px 1px 1px}

button.negative,a.button.negative{color:#D12F19;font-weight:bold}
button.negative:hover,a.button.negative:hover{color:#D12F19;border-color:#E86B6D}
button.negative:active,a.button.negative:active{color:#FFF;background:#D12F19;border-color:#D12F19;text-shadow:#A93816 1px 1px 1px}

/* Per Container Skin */
.margenn-skin-wufoo button,.margenn-skin-wufoo a.button{color:#464646;background:#EAEAEA url(../img/bck_button.png) repeat-x left top;font-weight:normal;border:1px solid #DEDEDE;border-right-color:#BBB;border-bottom-color:#BFBFBF;-webkit-box-shadow:rgba(0,0,0,.15) 0px 1px 3px;-moz-box-shadow:rgba(0,0,0,.15) 0px 1px 3px;-webkit-border-radius:11px;-moz-border-radius:11px}
.margenn-skin-wufoo button:hover,.margenn-skin-wufoo a.button:hover{color:#000;border-color:#999}
.margenn-skin-wufoo button:active,.margenn-skin-wufoo a.button:active{border-color:#CCC;background:#FFF url(../img/bck_button_on.png) repeat-x left top;-webkit-box-shadow:none;-moz-box-shadow:none}

.margenn-skin-wufoo button.positive,.margenn-skin-wufoo a.button.positive{color:#63A142;font-weight:bold}
.margenn-skin-wufoo button.positive:hover,.margenn-skin-wufoo a.button.positive:hover{color:#63A142;border-color:#7CB043}
.margenn-skin-wufoo button.positive:active,.margenn-skin-wufoo a.button.positive:active{color:#FFF;background:#94B717;border-color:#94B717;text-shadow:#607710 1px 1px 1px}

.margenn-skin-wufoo button.negative,.margenn-skin-wufoo a.button.negative{color:#D12F19;font-weight:bold}
.margenn-skin-wufoo button.negative:hover,.margenn-skin-wufoo a.button.negative:hover{color:#D12F19;border-color:#E86B6D}
.margenn-skin-wufoo button.negative:active,.margenn-skin-wufoo a.button.negative:active{color:#FFF;background:#D12F19;border-color:#D12F19;text-shadow:#A93816 1px 1px 1px}

/* Per Element Skin */
button.margenn-skin-wufoo,a.button.margenn-skin-wufoo{color:#464646;background:#EAEAEA url(../img/bck_button.png) repeat-x left top;font-weight:normal;border:1px solid #DEDEDE;border-right-color:#BBB;border-bottom-color:#BFBFBF;-webkit-box-shadow:rgba(0,0,0,.15) 0px 1px 3px;-moz-box-shadow:rgba(0,0,0,.15) 0px 1px 3px;-webkit-border-radius:11px;-moz-border-radius:11px}
button.margenn-skin-wufoo:hover,a.button.margenn-skin-wufoo:hover{color:#000;border-color:#999}
button.margenn-skin-wufoo:active,a.button.margenn-skin-wufoo:active{border-color:#CCC;background:#FFF url(../img/bck_button_on.png) repeat-x left top;-webkit-box-shadow:none;-moz-box-shadow:none}

button.margenn-skin-wufoo.positive,a.button.margenn-skin-wufoo.positive{color:#63A142;font-weight:bold}
button.margenn-skin-wufoo.positive:hover,a.button.margenn-skin-wufoo.positive:hover{color:#63A142;border-color:#7CB043}
button.margenn-skin-wufoo.positive:active,a.button.margenn-skin-wufoo.positive:active{color:#FFF;background:#94B717;border-color:#94B717;text-shadow:#607710 1px 1px 1px}

button.margenn-skin-wufoo.negative,a.margenn-skin-wufoo.button.negative{color:#D12F19;font-weight:bold}
button.margenn-skin-wufoo.negative:hover,a.margenn-skin-wufoo.button.negative:hover{color:#D12F19;border-color:#E86B6D}
button.margenn-skin-wufoo.negative:active,a.margenn-skin-wufoo.button.negative:active{color:#FFF;background:#D12F19;border-color:#D12F19;text-shadow:#A93816 1px 1px 1px}

/* Messages: User Feedback Messages. Don't need to be within a form. */
/* .widget namespace to avoid global namespace pollution */
.widget.message{padding:10px;border-width:1px 0;border-style:solid;margin-bottom:20px}
.widget.message p,.widget.message ul{margin-bottom:0}
.widget.message li{border-bottom-width:1px;border-bottom-style:dotted}
/* Succes Message */
.widget.message.succes{color:#336600;background-color:#EAFFEA;border-color:#009900;border-style:dotted}
.widget.message.succes li{border-bottom-color:#009900}
/* Error Message */
.widget.message.error{color:#AF4C4C;background-color:#FFDFDF;border-color:#DF7D7D}
.widget.message.error a{color:#EF1D2A;text-decoration:underline}
.widget.message.error a:hover{color:#FFF;background-color:#EF1D2A;text-decoration:none}
.widget.message.error li{border-bottom-color:#DF7D7D}